<template>
  <div id="Base" class="company-detail sd pt116">
    <div class="company-detail__warp">

      <div class="padding-tb-15">
        <Breadcrumb separator="">
          <BreadcrumbItem>当前位置</BreadcrumbItem>
          <BreadSeparator>:</BreadSeparator>
          <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem><a href="/proList">项目数据</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem>项目详情</BreadcrumbItem>
        </Breadcrumb>
      </div>

			<div class="company-detail__header">
        <Row type="flex" justify="start">
          <Col :span="3">
            <div class="house">历史业绩</div>
          <!--<p>浏览量：N 次</p>-->
          </Col>
          <Col :span="21">
            <div class="staff-info">
              <h3>{{detail?.prjName}}</h3>

              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>建设单位:</span>{{detail?.buildCorpName}}</p>
                </Col>
                <Col :span="12">
                  <p><span>建设单位统一社会信用代码:</span>{{detail?.buildCorpCode}}</p>
                </Col>
              </Row>
              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>施工许可证编号:</span>{{detail?.buiLicNum}}</p>
                </Col>
                <Col :span="12">
                  <p><span>项目类别:</span>{{detail?.prjType}}</p>
                </Col>
              </Row>
              <Row :gutter="[24, 8]">
                <Col :span="9">
                  <p><span>项目投资:</span>{{detail?.allInvest}}（万元）</p>
                </Col>
                <Col :span="12">
                  <p><span>建设地址:</span>{{detail?.prjArea}}</p>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
			</div>


      <Tabs type="card" v-model:activeKey="activeKey">
        <TabPane key="1" tab="基本信息">
          <Base :detail="detail" />
        </TabPane>
        <TabPane key="2" tab="参建单位及人员">
          <related />
        </TabPane>
        <TabPane key="3" tab="单位工程">
          <Unit />
        </TabPane>
        <TabPane key="4" tab="招投标信息">
          <bidding />
        </TabPane>
        <TabPane key="5" tab="合同信息">
          <cooperate/>
        </TabPane>
        <TabPane key="6" tab="施工图审查信息">
          <examine/>
        </TabPane>
        <TabPane key="7" tab="施工许可信息">
          <licence/>
        </TabPane>
        <TabPane key="8" tab="竣工备案信息">
          <putFile />
        </TabPane>
      </Tabs>

		</div>

  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, provide, ref } from 'vue';
import { Row, Col, Breadcrumb, Tabs } from "ant-design-vue";
import { useRoute } from 'vue-router'
import { Base  , Unit , bidding , cooperate , examine , licence , putFile , related } from './src/index';
import { getPrjBase, ProjectBaseModel } from '/@/api/pro';
import { parseTime } from '/@/utils';
export default defineComponent({
	components: {
    Base,Unit, bidding, cooperate, examine ,licence, putFile ,related ,Row, Col,
    Breadcrumb, BreadcrumbItem: Breadcrumb.Item,
    BreadSeparator: Breadcrumb.Separator,
    Tabs, TabPane: Tabs.TabPane
  },
  name: "Detail",
  setup() {
    const { params } = useRoute();
    const applyId:string = params.id as string;
    const detail = ref<ProjectBaseModel>({});

    provide('applyId', applyId);
    const init = async() => {
     detail.value = await getPrjBase({applyId});
    }
    onMounted(init);
    return {
      detail,  parseTime , activeKey: ref("1")
    }
  }
})
</script>

<style lang="less" scoped>
.company-detail {

  .company-detail__warp {
		width: @main-width;
		margin: 0 auto;

		.company-detail__header {
      position: relative;
      padding: 30px;
      margin-bottom: 16px;
      background: #fff;

      .house{
        display: flex;
        width: 100px;
        height: 100px;
        padding: 24px;
        margin: 8px 0 5px;
        font-size: 24px;
        line-height: 1.2;
        color: white;
        background: #3273BB;
        justify-content: center;
        align-content: center;
        align-items: center;

        &~p{
          width: 100px;
          font-size: 12px;
          text-align: center;
        }
      }
		}
	}

  .staff-info{
    h3{
      height: 37px;
      margin-bottom: 15px;
      font-size: 26px;
      font-weight: 600;
      line-height: 37px;
      color: #000;
    }

    p{
      margin-bottom: 8px;
      color: #000;

      &.car-no{
        margin-bottom: 18px;
      }

      > span {
        margin-right: 8px;
        line-height: 20px;
        color: #777;
      }
    }
  }
}

::v-deep(.ant-tabs-card) {
  margin-bottom: 40px;
  background: white;

  .ant-tabs-bar {
    margin: 0;
  }

  .ant-tabs-nav-container {
    height: 58px !important;
    background: #f5f5f6;
    border: 1px solid #e8eaee;

    .ant-tabs-tab {
      height: auto !important;
      padding: 18px 30px !important;
      margin: 0 !important;
      font-size: 16px;
      line-height: 22px !important;
      background: #f5f5f6 !important;
      border: 0 !important;

      &.ant-tabs-tab-active {
        color: @blue;
        background: @white !important;
      }
    }
  }
}
</style>
